<hr class="bg-white">
<div class="row">
  <div class="col-md-12">
    <h3>Create Session</h3>
  </div>
  <div class="col-md-6">
    <form [formGroup]="newSessionForm"
          (ngSubmit)="saveSession(newSessionForm.value)"
          autocomplete="off">
      <div class="form-group"
           [class.error]="name.invalid && name.dirty">
        <label for="sessionName">Session Name:</label>
        <em *ngIf="name.invalid && name.dirty">Required</em>
        <input formControlName="name"
               id="sessionName"
               type="text"
               class="form-control"
               placeholder="session name..." />
      </div>
      <div class="form-group"
           [ngClass]="{'error': presenter.invalid && presenter.dirty}">
        <label for="presenter">Presenter:</label>
        <em *ngIf="presenter.invalid && presenter.dirty">Required</em>
        <input formControlName="presenter"
               id="presenter"
               type="text"
               class="form-control"
               placeholder="presenter..." />
      </div>
      <div class="form-group"
           [ngClass]="{'error': duration.invalid && duration.dirty}">
        <label for="duration">Duration:</label>
        <em *ngIf="duration.invalid && duration.dirty">Required</em>
        <select formControlName="duration"
                class="form-control">
          <option value="">select duration...</option>
          <option value="1">Half Hour</option>
          <option value="2">1 Hour</option>
          <option value="3">Half Day</option>
          <option value="4">Full Day</option>
        </select>
      </div>
      <div class="form-group"
           [ngClass]="{'error': level.invalid && level.dirty}">
        <label for="level">Level:</label>
        <em *ngIf="level.invalid && level.dirty">Required</em>
        <select formControlName="level"
                class="form-control">
          <option value="">select level...</option>
          <option value="Beginner">Beginner</option>
          <option value="Intermediate">Intermediate</option>
          <option value="Advanced">Advanced</option>
        </select>
      </div>
      <div class="form-group"
           [ngClass]="{'error': abstract.invalid && abstract.dirty}">
        <label for="abstract">Abstract:</label>
        <em *ngIf="abstract.invalid && abstract.dirty && abstract?.errors.required">Required</em>
        <em *ngIf="abstract.invalid && abstract.dirty && abstract?.errors.maxlength">Cannot exceed 400 characters</em>
        <em *ngIf="abstract.invalid && abstract.dirty && abstract?.errors.restrictedWords">Restricted Words found: {{abstract.errors.restrictedWords}}</em>
        <textarea formControlName="abstract"
                  id="abstract"
                  rows="3"
                  class="form-control"
                  placeholder="abstract..."></textarea>
      </div>
      <button type="submit"
              [disabled]="newSessionForm.invalid"
              class="btn btn-primary mr-3">Save</button>
      <button type="button"
              (click)="cancel()"
              class="btn btn-default">Cancel</button>
    </form>
  </div>

</div>
